<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-swiper
					:list="list"
					:current="current"
					indicator
					@onChange="onChange"
				>
					<template #progresor>
						<pure-progresor
							@onPrev="onPrev"
							@onNext="onNext"
							:disabledPrev="current === 0"
							:disabledNext="current === list.length - 1"
						></pure-progresor>
					</template>
				</pure-swiper>
			</pj-demo>

			<!-- 按钮文本 -->
			<pj-demo title="按钮文本">
				<pure-swiper
					:list="list"
					:current="current"
					indicator
					@onChange="onChange"
				>
					<template #progresor>
						<pure-progresor
							prevText="后"
							nextText="前"
							@onPrev="onPrev"
							@onNext="onNext"
							:disabledPrev="current === 0"
							:disabledNext="current === list.length - 1"
						></pure-progresor>
					</template>
				</pure-swiper>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const list = ref([
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" },
		{ src: "/static/images/elephant.jpg" }
	]);
	const current = ref(0);

	// 切换事件
	function onChange(e) {
		current.value = e.detail.current;
	}

	// 上一个
	function onPrev() {
		current.value--;
	}

	// 下一个
	function onNext() {
		current.value++;
	}
</script>

<style lang="scss" scoped></style>
